<template>
  <div>
    <el-table
      class="table_tree"
      :data="items"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children' }"
    >
      <el-table-column label="节点名称（编码）" width="500">
        <template slot-scope="scope">{{ scope.row.title }} </template>
      </el-table-column>

      <el-table-column label="是否启用" width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_show"
            :active-value="1"
            :inactive-value="0"
            @change="onenable($event, scope.row )"
          />

        </template>
      </el-table-column>

      <el-table-column align="center" property="sort" label="排序" show-overflow-tooltip width="80">
        <template slot-scope="scope" class="sort">
          <el-input v-model="scope.row.sort" size="mini" placeholder="排序" @blur.stop="listUpdate(scope.row,'sort')" />
        </template>
      </el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="800px">
      <el-form ref="open_form" v-model="open_form" label-width="80px">
        <el-form-item label="节点名称">
          <el-input v-model="open_form.title" />
        </el-form-item>
        <el-form-item label="节点上级">
          <el-select
            ref="selectRef"
            v-model="open_form.currentLabel"
            clearable
            @visible-change="handleVisibleChange"
          >
            <el-option
              v-loading="loading"
              style="height: 100%; padding: 0"
              value=""
              element-loading-text="加载中..."
              element-loading-spinner="el-icon-loading"
            >
              <el-tree
                ref="treeRef"
                :data="dataOfTree"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :current-node-key="selectedNode.value"
                @node-click="handleNodeClicked"
              />
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onClose">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title',
        value: 'id'
      },
      is_show: 1,
      items: [],
      dialogVisible: false,
      open_form: [],

      // currentValue: undefined,
      // // currentLabel: undefined,
      dataOfTree: [],
      selectedNode: {},
      loading: false,
      dataSource: {}
    }
  },

  mounted() {
    this.show()
  },
  methods: {
    listUpdate(row, field) {
      if (row.id) {
        this.$api.post('/adminmenu/listUpdate', {
          id: row.id,
          [field]: row[field]
        }).then(res => {
          if (res.code == 2000) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message: res.msg,
              type: 'info'
            })
          }
        })
      }
    },
    handleNodeClicked(data, node, comp) {
      // console.log(data, node, comp, 'handleNodeClicked');
      this.selectedNode = data
      this.open_form.currentLabel = data[this.defaultProps.label]
      this.open_form.currentValue = data[this.defaultProps.value]
      const result = this.buildResultByNodeData(data)
      this.$emit('myInputEvent', result)
      this.$emit('onNodeSelectEvent', result)
      this.closeSelect()
    },
    closeSelect() {
      this.$refs.selectRef.blur()
    },
    buildResultByNodeData(data) {
      return {
        node: data[this.defaultProps.value],
        data: {
          label: data[this.defaultProps.label],
          value: data[this.defaultProps.value]
        },
        meta: data
      }
    },
    handleVisibleChange(visible) {
      console.log(visible, '=handleVisibleChange')
    },
    filterNode(value, data) {
      console.log(value, data, 'fileterNode')
      // if (!value) {
      //   return data
      // }
      // if (this.isFilterWithValue) {
      //   if (data[this.defaultProps.value] === value) {
      //     this.selectedNode = data
      //     this.currentLabel = data[this.defaultProps.label]
      //     this.$refs.treeRef.setCurrentKey(this.selectedNode[this.defaultProps.value])
      //     const result = this.buildResultByNodeData(data)
      //     this.$emit('myInputEvent', result)
      //   }
      // } else {
      //   return data[this.defaultProps.label].indexOf(value) !== -1
      // }
      // return data
    },
    onSubmit() {
      this.open_form.pid = this.open_form.currentValue

      this.$api.post('/Sysbase/get_menu_update', this.open_form).then(res => {
        if (res.code == 2000) {
          this.$message({
            type: 'success',
            showClose: true,
            message: res.msg
          })
          this.dialogVisible = false
          this.show()
        }
      })
    },
    onClose() {
      this.dialogVisible = false
    },
    show() {
      this.$api.post('/Sysbase/getRolesMenus').then(res => {
        if (res.code == 2000) {
          console.log(res.menus)
          this.items = res.menus
        }
      })
    },

    onenable(e, row) {
      this.$api.post('/Adminmenu/update', { 'id': row.id, 'is_show': row.is_show }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.$emit('refesh_list')
        this.closeForm()
      }).catch(() => {
        this.loading = false
      })
    },

    handleEdit(e, row) {
      this.open_form = []
      this.dataOfTree = [{ 'title': '顶级', 'pid': 0, 'id': 0 }]
      this.dialogVisible = true
      this.$api.post('/Sysbase/get_menu_detail', { id: row.id }).then(res => {
        if (res.code == 2000) {
          this.open_form = res.menus
          if (res.menus.pid == 0) {
            this.open_form.currentLabel = '顶级'
            this.open_form.currentValue = 0
          } else {
            this.open_form.currentLabel = res.menus.pid_title
            this.open_form.currentValue = res.menus.pid
          }

          console.log(this.open_form.currentLabel)
          console.log(this.open_form.currentValue)
          this.dataOfTree = this.dataOfTree.concat(this.items)
        }
      })
    }

  }
}
</script>

<style scoped>
.table_tree{margin:10px}
</style>
